<template>
  <div class="app-container">
    <!-- <span>这是二级路由的默认展示的页面</span> -->
    <!--
      svg-sprites原生使用: 制作svg太麻烦了..
      借助于svg-sprite-loader 自动得到一个svg精灵图, 默认的symbol的id就是文件名
     -->
    <!-- <svg>
      <use xlink:href="#icon-form" />
    </svg>
    <svg>
      <use xlink:href="#icon-tree" />
    </svg> -->
    <!-- 终极目标 -->
    <!-- <svg-icon icon-class="tree" /> -->
    <!-- ------------------------------------------------------------------------------- -->
    <!--
      :on-success="handleSuccess"    上传成功, 触发这个函数
      :before-upload="beforeUpload"  上传之前, 触发这个函数

    -->
    <!-- <h5>上传excel组件</h5>
    <UploadExcel
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    /> -->
    <!-- -------------------------------------------------------------------------------- -->

    <!-- 图片上传组件 -->
    <h2>图片上传组件</h2>
    <ImageUpload />
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  methods: {
    // 上传之前 -> 触发这个函数
    beforeUpload(file) {
      // file 上传的文件
      // 文件的体积/大小 默认是字节 B / 1024 => KB / 1024  => MB
      console.log('上传之前....')
      // 判断上传的文件大小是否小于0.5M
      const isLt1M = file.size / 1024 / 1024 < 0.5

      if (isLt1M) {
        return true
      }

      this.$message({
        message: '请不要上传超过0.5MB的文件.',
        type: 'warning'
      })
      return false
    },
    // 上传成功 -> 触发这个函数
    handleSuccess({ header, results }) {
      // header 表头
      // results 表格内部的数据
      console.log('上传成功....', header, results)
    }
  }
}

function fn(callback) {
  //  callback 函数体
  callback(1234)
}
fn((num) => {
  console.log(num)
})

</script>
<!-- 学习sass 0成本 -> less -->
<!-- /*  sass 是css预处理器的一种 (less stylus)
  默认不高亮 - 下载vscode sass
  两种写法
  1. .sass文件 老的/之前的写法 / 写法比较奇怪 和 stylus几乎一样
    分号, 花括号, 不要写 / 写就报错
  2. .scss -> 新 -> 推荐的 -> 和less几乎一样
*/ -->
<!-- <style lang="sass" scoped>
.dashboard
  width: 400px
  height: 400px
  background-color: teal
  span
    color: pink
</style> -->

<style lang="scss" scoped>
// 嵌套 声明变量
// less 声明变量
// @color: #fff;
// scss 声明变量
$color: #fff;
.dashboard {
  width: 400px;
  height: 400px;
  background-color: teal;
  span {
    font-size: 25px;
    color: $color;
  }
}
</style>
